<template>
  <el-dialog :title="'关系数据库抽取'" :visible.sync="dialogFormVisible" :append-to-body="true"
             :close-on-click-modal="false" :before-close="handleBeforeClose">
    <el-form label-position="right" label-width="120px" :model="readerForm" ref="rdForm" :rules="rules">
      <el-tabs v-model="activeName">
        <el-tab-pane label="数据选择" name="first">
          <el-row>
            <el-col :span="24">
              <el-form-item label="数据库源：" prop="sourceId" label-width="150px">
                <el-select v-model="readerForm.sourceId" filterable @change="rDsChange">
                  <el-option v-for="item in rDsList" :key="item.id" :label="item.sourceName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="采集数据范围：" prop="isIncrement" label-width="150px">
                <el-radio v-for="item in dictList('data_get_is_increment')" :key="'type' + item.label"
                          v-model="readerForm.isIncrement" :label="item.value" @change="handleRadioChange">
                  {{ item.label }}
                </el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="readerForm.isIncrement === '2'">
              <el-form-item label="时间段：" prop="showDatePicker" label-width="150px">
                <el-date-picker @change="handleDateRangeChange" v-model="readerForm.dateRange" type="datetimerange"
                                range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="24" style="flex-wrap: nowrap" v-if="data.length > 0">
              <el-form-item label="选择表：" prop="selectedData" :span="24">
                <div class="edit_dev">
                  <el-transfer
                    v-model="selectedData"
                    :data="data"
                    :titles="['待选', '已选']"
                    @change="handleChange"
                    :left-default-width="leftWidth"
                    :right-default-width="leftWidth"
                    filterable
                    @left-check-change="handleLeftCheckChange"
                  >
                    <span slot-scope="{ option }">

                       {{ option.label }}
                      <span class="truncate"
                            style="color: #8492a6; font-size: 13px; padding-left: 10px; padding-right: 15px">{{ option.tableComment
                        }}</span>

                      <div class="selectColumn"    style="width: 30%; float: right" v-if="readerForm.isIncrement === '2'">

                            <el-select
                              v-model="option.onlyColumn"
                              placeholder="选择时间字段"
                              @change="handleSelectChange(option)"
                            >
                 <el-option v-for="item in option.columnList" :key="item.columnName" :label="item.columnInfo"
                            :value="item.columnName" :disabled="item.disabled"> </el-option>
               </el-select>

                      </div>


</span>
                    <!-- 自定义右侧选中栏的内容 -->
                    <template slot="right-footer">
                      <!-- <el-button @click="removeSelected">移除选中项</el-button> -->
                      <el-button @click="clearSelected">清空已选</el-button>
                    </template>
                  </el-transfer>
                </div>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12" >-->
            <!--              <el-form-item label="数据库表：" prop="tableId">-->
            <!--                <el-input v-model="searchText" placeholder="输入内容检索表"></el-input>-->
            <!--                <el-table :ref="waitList"-->
            <!--                          :data="filteredData"-->
            <!--                          tooltip-effect="dark"-->
            <!--                          style="width: 100%"-->
            <!--                          @selection-change="handleSelectionChange" :max-height="tableHeight" >-->
            <!--                  <el-table-column type="selection" width="55"> </el-table-column>-->
            <!--                  <el-table-column prop="id" label="id"  width="180" v-if="false"> </el-table-column>-->
            <!--                  <el-table-column prop="tableName" label="表名"  > </el-table-column>-->
            <!--                  <el-table-column prop="tableComment" label="表描述" v-if="false"> </el-table-column>-->
            <!--                </el-table>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="11" style="border: 1px dashed #BBB;margin-left:20px">-->
            <!--              <el-table :data="selColumnList" v-model="selColumnList" style="width: 100%" :show-header="false">-->
            <!--                &lt;!&ndash; 表格列配置 &ndash;&gt;-->
            <!--                <el-table-column label="id" prop="id" :editable="true" v-if="false">-->
            <!--                  <template slot-scope="scope">-->
            <!--                    &lt;!&ndash; 使用 el-input 进行编辑 &ndash;&gt;-->
            <!--                    <el-input v-model="scope.row.id" @blur="handleEdit(scope.row, 'name')"></el-input>-->
            <!--                  </template>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column prop="tableName" label="表名"  width="180"> </el-table-column>-->
            <!--&lt;!&ndash;                <el-table-column label="表名称1" prop="tableName" :editable="false">&ndash;&gt;-->
            <!--&lt;!&ndash;                  <template slot-scope="scope">&ndash;&gt;-->
            <!--&lt;!&ndash;                    &lt;!&ndash; 使用 el-input 进行编辑 &ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;                    <el-input v-model="scope.row.tableName" @blur="handleEdit(scope.row, 'name')"></el-input>&ndash;&gt;-->
            <!--&lt;!&ndash;                  </template>&ndash;&gt;-->
            <!--&lt;!&ndash;                </el-table-column>&ndash;&gt;-->
            <!--                <el-table-column label="表描述" prop="tableComment" :editable="true" v-if="false">-->
            <!--                  <template slot-scope="scope">-->
            <!--                    &lt;!&ndash; 使用 el-input 进行编辑 &ndash;&gt;-->
            <!--                    <el-input v-model="scope.row.tableComment"></el-input>-->
            <!--                  </template>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column label="选择条件" prop="selectedColumn"  v-if="readerForm.isIncrement=='2'||readerForm.isIncrement=='3'">-->
            <!--                  <template slot-scope="scope">-->
            <!--                    <el-select v-model="scope.row.selectedColumn" placeholder="请选择时间字段" @change="handleSelectChange(scope.row)" >-->
            <!--                      <el-option-->
            <!--                        v-for="item in scope.row.columnList"-->
            <!--                        :key="item.columnName"-->
            <!--                        :label="item.columnName"-->
            <!--                        :value="item.columnName">-->
            <!--                      </el-option>-->
            <!--                    </el-select>-->
            <!--                  </template>-->
            <!--                </el-table-column>-->
            <!--                &lt;!&ndash; 其他列配置 &ndash;&gt;-->
            <!--              </el-table>-->
            <!--            </el-col>-->
          </el-row>
        </el-tab-pane>
        <!--        <el-tab-pane label="数据过滤" name="second">-->
        <!--          <el-row>-->
        <!--            <el-col :span="8" style="height: auto;">-->
        <!--              <el-table :data="selColumnList" style="width: 100%" :show-header="false">-->
        <!--                &lt;!&ndash; 表格列配置 &ndash;&gt;-->
        <!--                <el-table-column label="id" prop="id" :editable="true" v-if="false">-->
        <!--                  <template slot-scope="scope">-->
        <!--                    &lt;!&ndash; 使用 el-input 进行编辑 &ndash;&gt;-->
        <!--                    <el-input v-model="scope.row.id" @blur="handleEdit(scope.row, 'name')"></el-input>-->
        <!--                  </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column prop="tableName" label="表名" > </el-table-column>-->
        <!--                <el-table-column label="表描述" prop="tableComment" :editable="true" v-if="false">-->
        <!--                  <template slot-scope="scope">-->
        <!--                    <el-input v-model="scope.row.tableComment"></el-input>-->
        <!--                  </template>-->
        <!--                </el-table-column>-->
        <!--              </el-table>-->
        <!--            </el-col>-->
        <!--            <el-col :span="16" >-->
        <!--              <sql-editor ref="sqleditor"  :value="scope.row.filtersql"-->
        <!--                          style="height: 300px;transform: translate(0px, 0px);" @changeTextarea="changeTextarea($event)" />-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </el-form>
    <el-row type="flex" justify="center" align="right">
      <el-button type="primary" style="width: 15%; margin-top: 5%" @click="createDQJob">提交</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// import * as dsQueryApi from '@/api/dts/metadata-query'
// import { list as jdbcDsList } from '@/api/dts/datax-jdbcDatasource'
import Bus from '../busReader'
import { listDataSource } from '@/api/metadata/sqlconsole'
import { getTableList } from '@/api/masterdata/masterdataTable'
import { fetchcolumnList, oracleCountTableTotalModel } from '@/api/metadata/column'
import SqlEditor from '@/components/SqlEditor'
import StyleSelect from '@/views/customToolbar/component/styleSelect'
import { getorcleDatajson } from '@/api/database'

export default {
  name: 'TableReader',
  props: ['readInfo'],
  components: { StyleSelect, SqlEditor },
  data() {
    return {
      start: undefined,
      end: undefined,
      dialogTableVisible: false,
      searchText: '', // 搜索关键词
      showCondition: false,
      tableHeight: '300px',
      activeName: 'first',
      dialogFormVisible: true,
      rDsList: [],
      rTbList: [],
      schemaList: [],
      columns: [],
      rColumnList: [], //列名数组
      loading: false,
      active: 1,
      customFields: '',
      customType: '',
      customValue: '',
      dataSource: '',
      datalist: [],
      readerForm: {
        sourceId: undefined,
        sourceName: undefined,
        columns: [],
        tableName: '',
        tableId: [],
        checkAll: false,
        isIndeterminate: true,
        splitPk: '',
        tableSchema: '',
        querySql: '', //sql语句
        isIncrement: '',
        where: '', //where语句
        startTime: '',
        endTime: '',
        startindex: '',
        endindex: '',
        dateRange: [],

      },
      rules: {
        sourceId: [{ required: true, message: '数据库源为必填项', trigger: 'change' }],
        isIncrement: [{ required: true, message: '采集数据范围为必填项', trigger: 'change' }],
        startindex: [{ required: true, message: '开始范围必填项', trigger: 'change' }],
        dateRange: [{ required: true, message: '时间范围必填项', trigger: 'change' }],
        endindex: [{ required: true, message: '结束范围必填项', trigger: 'change' }]
        // selectedData: [{ required: true, message: '数据库表为必填项', trigger: 'change' }],
      },
      tableData: [],
      waitList: [],
      selColumnList: [],
      nowSql: '',
      selColumnListFilter: [],

      showDatePicker: false,
      selectedData: [],
      data: [],
      leftWidth: '300px', // 左侧面板宽度
      rightWidth: '300px', // 右侧面板宽度
      selectedItem: null,
      selectedOption: null,
      firstClick: false,
      monmentInfo: [],
      sourceDatasourceId: '',
      sourceDatasourceName: '',
      dataExtractionDetailList: [],
      list: []
    }
  },
  computed: {
    // 使用计算属性过滤数据
    filteredData() {
      return this.tableData.filter((item) => {
        // 使用关键词搜索姓名字段
        return item.tableName.toLowerCase().includes(this.searchText.toLowerCase())
      })
    }
  },
  watch: {
    'readerForm.sourceId': function(oldVal, newVal) {
      // if (this.dataSource === 'postgresql' || this.dataSource === 'oracle' || this.dataSource === 'sqlserver' || this.dataSource === 'hana') {
      //   this.getSchema()
      // } else {
      //   this.getTables('reader')
      // }
    },
    'readerForm.sourceName': function(oldVal, newVal) {
      this.rDsList.map((v, i) => {
        if (v.sourceName == oldVal) {
          this.readerForm.sourceName = oldVal
        }
      })
    },

    selColumnList: function(oldVal, newVal) {
    }
  },
  mounted() {
    // const parentElementTwo = document.querySelector('.edit_dev').querySelector('.is-with-footer').querySelectorAll('.selectColumn');
    // parentElementTwo.forEach((item, index) => {
    //   item.style.display='block';
    // });
    if (!this.readInfo.isIncrement) {
      // this.readerForm.isIncrement = '1'
      // this.readerForm.sourceId = this.readInfo.sourceId
    } else {
      if (this.readInfo.isIncrement === '1') {
        console.log(this.readInfo)
        setTimeout(function() {
          const parentElementTwo = document.querySelector('.edit_dev').querySelector('.is-with-footer').querySelectorAll('.selectColumn')
          parentElementTwo.forEach((item, index) => {
            item.style.display = 'block'
          })
        }, 1000) // 1000 毫秒等于 1 秒
      } else {
        setTimeout(function() {
          const parentElementTwo = document.querySelector('.edit_dev').querySelector('.is-with-footer').querySelectorAll('.selectColumn')
          parentElementTwo.forEach((item, index) => {
            item.style.display = 'block'
          })
        }, 1000) // 1000 毫秒等于 1 秒
      }
    }
  },
  created() {
    // console.log("123="+JSON.stringify( this.readInfo))
    this.readerForm = this.readInfo
    if (!this.readInfo.isIncrement) {
      // this.readerForm.isIncrement = '1';
    }
    if (this.readInfo.startTime && this.readInfo.endTime) {
      this.readerForm.dateRange.push(this.readInfo.startTime, this.readInfo.endTime)
    }

    if (this.readInfo.tableId) {
      this.selColumnList = this.readInfo.tableId
      this.tableData = this.readInfo.tableId

      for (var i = 0; i < this.readInfo.tableId.length; i++) {
        this.selectedData.push(this.readInfo.tableId[i].key)
      }
      console.log('sssssssss=' + JSON.stringify(this.readInfo))
      this.data = this.readInfo.tableId
    }
    this.getJdbcDs()
  },
  methods: {
    handleDateRangeChange() {
      // 处理日期范围选择器的值变化事件
      if (Array.isArray(this.dateRange) && this.dateRange.length === 2) {
        this.readerForm.startTime = this.dateRange[0]
        this.readerForm.endTime = this.dateRange[1]
      } else {
        this.readerForm.startTime = ''
        this.readerForm.endTime = ''
      }
    },
    handleLeftCheckChange(data, checked) {
      console.log('左侧复选框状态变化')
      console.log('选中的数据：', data)
      console.log('是否选中：', checked)
      fetchcolumnList({ sourceId: checked[0] }).then((res) => {
        if (res.data.code === 0) {
          var dataInfo = res.data.data
          this.datalist = res.data.data
          var columnList = []
          for (let i = 0; i < dataInfo.length; i++) {
            var cobj = {
              columnName: dataInfo[i].columnName,
              columnComment: dataInfo[i].columnComment,
              columnInfo: dataInfo[i].columnName + dataInfo[i].columnComment
            }
            columnList.push(cobj)
          }

          this.monmentInfo = this.data.filter((item) => checked.includes(item.key))
          const index = this.data.findIndex((item) => item.id === checked[0])
          // console.log("====变更前"+JSON.stringify(this.data[index]))
          this.data[index].columnList = columnList
          this.dataFun(this.data[index], data)

          // console.log("====变更后"+JSON.stringify(this.data[index]))
          // console.log("====monmentInfo"+JSON.stringify(this.monmentInfo))
          // console.log("===="+index)
          // .columnList = columnList;
        } else {
          console.log('未获取到')
        }
      })
    },
    dataFun(param1) {
      // // 数据来源
      this.sourceDatasourceId = this.readerForm.sourceId
      this.sourceTableName = param1.table
      this.dataExtractionDetailList = []
      this.dataExtractionDetailList.push({ sourceTableName: this.sourceTableName })
      oracleCountTableTotalModel({
        sourceDatasourceId: this.sourceDatasourceId,
        dataExtractionDetailList: this.dataExtractionDetailList
      }).then((res) => {

        this.list.push({ ...res.data })
      })
    },
    handleSelectChange(row) {
      console.log("====变更前111"+JSON.stringify(this.selColumnList))
      console.log("====变更前111"+JSON.stringify(this.selColumnList))
      // // 处理 el-select 的选项变化事件
      this.monmentInfo=this.data.filter(item => row.key.includes(item.key));
      const index = this.selColumnList.findIndex(item => item.id === row.id);
      console.log("====变更前1"+JSON.stringify(this.data[index]))
      console.log("====变更前2"+JSON.stringify(this.selColumnList[index]))
      this.selColumnList[index].onlyColumn = row.onlyColumn;
      console.log("====变更后3"+JSON.stringify(this.data[index]))
      console.log('选中的选项:',row);
      console.log('选中的选项-当前selColumnList=:'+ JSON.stringify(this.selColumnList));

    },
    handleChange(value) {
      this.list.map((v, i) => {
        if (v.name == this.data[i].label) {
          console.log(v.name, this.data[i].label)
          this.data[i].total = v.total
        }
      })
      // console.log("穿梭框选中的内容==="+JSON.stringify(this.data.filter(item => value.includes(item.key))))
      this.selColumnList = this.data.filter((item) => value.includes(item.key))
      setTimeout(function() {
        const parentElementTwo = document.querySelector('.edit_dev').querySelector('.is-with-footer').querySelectorAll('.selectColumn')
        parentElementTwo.forEach((item, index) => {
          item.style.display = 'block'
        })
      }, 1000) // 1000 毫秒等于 1 秒
    },
    removeSelected() {
      // 移除选中项的逻辑
      this.selectedData = []
    },
    clearSelected() {
      // 清空选中项的逻辑
      this.selectedData = []
    },
    changeTextarea(val) {
      this.temp.executeStatement = val
    },
    handleBeforeClose(done) {
      this.dialogFormVisible = false
      // this.readerForm.tableId = this.waitList;
      this.readerForm.tableId = this.selColumnList
      this.rest()
      this.$emit('change', this.readerForm)
    },

    handleRadioChange(value) {
      // 处理选项变化事件
      console.log('选项发生变化，新值为---：', value)
      if (value === '0') {
        this.readerForm.isIncrement = '0'
      } else if (value === '1') {
        this.readerForm.isIncrement = '1'

        const parentElementTwo = document.querySelector('.edit_dev').querySelector('.is-with-footer').querySelectorAll('.selectColumn')
        parentElementTwo.forEach((item, index) => {
          item.style.display = 'block'
        })
      } else {
        this.readerForm.isIncrement = '2'
        const parentElementTwo = document.querySelector('.edit_dev').querySelector('.is-with-footer').querySelectorAll('.selectColumn')
        parentElementTwo.forEach((item, index) => {
          item.style.display = 'block'
        })
      }
    },
    handleSelectionChange(val) {
      // console.log("选中的行="+JSON.stringify(val))
      var arr = []
      val.forEach(function(element) {
        element.columnList = []
        let columnListAll = []
        fetchcolumnList({ sourceId: element.id }).then((res) => {
          // console.log("获取表列==="+JSON.stringify(res))
          if (res.data.code === 0) {
            columnListAll = res.data.data
            // console.log("当前获得表列数据1="+JSON.stringify(columnListAll))
            var columnInfo = []
            columnListAll.forEach(function(cloumn) {
              const cloObj = {
                columnName: cloumn.columnName,
                columnComment: cloumn.columnComment
              }
              columnInfo.push(cloObj)
            })
            element.columnList = columnInfo
            console.log('当前获得表列数据2=' + JSON.stringify(element))
            arr.push(element)
            console.log('====选中的行数据666======' + JSON.stringify(arr))
          } else {
            console.log('未获取到')
          }
        })
        console.log('====选中的行数据888======' + JSON.stringify(arr))
      })

      this.selColumnList = arr
    },
    setselCol(arr) {
      this.selColumnList = arr
      console.log('====选中的行数据999======' + JSON.stringify(this.selColumnList))
    },

    createDQJob() {
      if (this.selectedData.length <= 0) {
        this.$message({
          message: '您没有选中表数据',
          type: 'warning'
        })
      }
      this.$refs.rdForm.validate((valid) => {
        if (valid) {
          this.drawer = true
          // 表单验证通过，执行提交操作
          this.dialogFormVisible = false

          this.readerForm.tableId = this.selColumnList

          // 清空选中项的逻辑
          this.$emit('change', this.readerForm)

        } else {
          // 表单验证失败，显示错误信息
          console.log('表单验证失败')
        }
      })
      // if(!this.readerForm.sourceId){
      //   this.$message({
      //     message: '数据源为必填项',
      //     type: 'warning'
      //   });
      //   return
      // }
      // if(this.selectedData.length<=0){
      //   this.$message({
      //     message: '您没有选中表数据',
      //     type: 'warning'
      //   });
      //   return
      // }

      // this.$refs.rdForm.validate(valid => {
      //   if (valid) {
      //     this.dialogFormVisible=false;
      //     // this.readerForm.tableId = this.waitList;
      //     this.readerForm.tableId = this.selColumnList;
      //     this.$emit('change', this.readerForm);
      //   } else {
      //     // 表单验证失败
      //     return false;
      //   }
      // });
    },
    //获取列名
    rTbChange(id) {
      this.rTbList.forEach((item) => {
        if (item.id == id) {
          this.readerForm.tableName = item.tableName
        }
      })
      fetchcolumnList({ sourceId: id }).then((res) => {
        if (res.data.code === 0) {
          this.rColumnList = res.data.data
          console.log(this.rColumnList, 'list')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    rest() {
      this.rColumnList = []
      this.readerForm = {
        sourceId: undefined,
        sourceName: undefined,
        columns: [],
        tableName: '',
        tableId: '',
        checkAll: false,
        isIndeterminate: true,
        splitPk: '',
        tableSchema: '',
        querySql: '', //sql语句
        where: ''
      }
      this.rTbList = []
    },
    // 获取可用数据源

    getJdbcDs() {
      this.loading = true
      listDataSource().then((response) => {
        if (response.data.code == 200) {
          response.data.data.map((v, i) => {
            if (v.sourceName == 'wind') {
              this.rDsList.push(v)
            }
          })
          this.loading = false
        }
      })
    },


    // getJdbcDs() {
    //   this.loading = true
    //   listDataSource().then((response) => {
    //     if (response.data.code == 200) {
    //       response.data.data.map((v, i) => {
    //         this.rDsList.push(v)
    //       })
    //       this.loading = false
    //     }
    //   })
    // },
    // 获取表名
    getTables(type) {
      if (type === 'reader') {
        let obj = {}
        if (this.dataSource === 'postgresql' || this.dataSource === 'oracle' || this.dataSource === 'sqlserver' || this.dataSource === 'hana') {
          obj = {
            sourceId: this.readerForm.sourceId,
            tableSchema: this.readerForm.tableSchema
          }
        } else {
          obj = {
            sourceId: this.readerForm.sourceId
          }
        }
        // 组装
        getTableList({ sourceId: this.readerForm.sourceId }).then((res) => {
          if (res.data.code == 200) {
            this.rTbList = res.data.data
            this.tableData = []
            this.data = []
            let arr = []
            for (let i = 0; i < this.rTbList.length; i++) {
              if (this.rTbList[i].tableName == 'sys_user') {
                arr.push(this.rTbList[i])
              } else if (this.rTbList[i].tableName == 'sys_menu') {
                arr.push(this.rTbList[i])
              } else if (this.rTbList[i].tableName == 'sys_login_log') {
                arr.push(this.rTbList[i])
              } else if (this.rTbList[i].tableName == 'sys_dict_group') {
                arr.push(this.rTbList[i])
              } else if (this.rTbList[i].tableName == 'sys_dict') {
                arr.push(this.rTbList[i])
              }

            }
            for (let i = 0; i < arr.length; i++) {
              this.tableData.push({
                id: arr[i].id,
                tableName: arr[i].tableName + arr[i].tableComment,
                tableComment: arr[i].tableComment,
                table: arr[i].tableName,
              })
              this.data.push({
                key: arr[i].id,
                label: arr[i].tableName,
                tableName: arr[i].tableName + arr[i].tableComment,
                tableComment: arr[i].tableComment,
                table: arr[i].tableName,
                id: arr[i].id,
              })

            }
          }
        })


        // getTableList({ sourceId: this.readerForm.sourceId }).then((res) => {
        //   if (res.data.code == 200) {
        //     this.rTbList = res.data.data
        //     this.tableData = []
        //     this.data = []
        //     for (let i = 0; i < this.rTbList.length; i++) {
        //       this.tableData.push({
        //         id: this.rTbList[i].id,
        //         tableName: this.rTbList[i].tableName + this.rTbList[i].tableComment,
        //         tableComment: this.rTbList[i].tableComment,
        //         table: this.rTbList[i].tableName
        //       })
        //       this.data.push({
        //         key: this.rTbList[i].id,
        //         label: this.rTbList[i].tableName,
        //         tableName: this.rTbList[i].tableName + this.rTbList[i].tableComment,
        //         tableComment: this.rTbList[i].tableComment,
        //         table: this.rTbList[i].tableName,
        //         id: this.rTbList[i].id,
        //         total: this.rTbList[i].total
        //       })
        //       // console.log(JSON.stringify(this.tableData))
        //     }
        //   }
        // })
      }
    },
    getSchema() {
      const obj = {
        sourceId: this.readerForm.sourceId
      }
      // dsQueryApi.getTableSchema(obj).then(response => {
      //   this.schemaList = response
      // })
      getTableList(obj).then((res) => {
        if (res.data.code === 200) {
          this.schemaList = res.data.data
        }
      })
    },
    // schema 切换
    schemaChange(e) {
      this.readerForm.tableSchema = e
      // 获取可用表
      this.getTables('reader')
    },
    // reader 数据源切换
    rDsChange(e) {
      // 清空
      this.readerForm.tables = [] //选中表清空
      this.readerForm.tableName = ''
      this.readerForm.sourceId = e
      this.rDsList.find((item) => {
        if (item.id === e) {
          this.readerForm.sourceName = item.sourceName
          this.dataSource = item
        }
      })
      Bus.sourceId = e
      this.$emit('selectDataSource', this.dataSource)
      // 获取可用表
      this.getTables('reader')
    },
    rHandleCheckAllChange(val) {
      this.readerForm.columns = val ? this.rColumnList : []
      this.readerForm.isIndeterminate = false
    },
    rHandleCheckedChange(value) {
      console.log(value)
      const checkedCount = value.length
      this.readerForm.checkAll = checkedCount === this.rColumnList.length
      this.readerForm.isIndeterminate = checkedCount > 0 && checkedCount < this.rColumnList.length
    },
    getData() {
      // if (Bus.sourceId) {
      //   this.readerForm.sourceId = Bus.sourceId
      // }
      return this.readerForm
    }
  }
}
</script>
<style scoped>
.el-checkbox__label {
  width: 100%;
}
</style>
<style scoped>
.edit_dev {
  margin-left: 3%;
}

.edit_dev >>> .el-transfer-panel {
  width: 40%;
}

.edit_dev >>> .el-transfer-panel .el-transfer-panel__filter {
  width: 300px;
}

.edit_dev >>> .el-transfer-panel__body .selectColumn {
  display: none;
}

/*.edit_dev >>> .is-with-footer .selectColumn{*/
/*  display: none;*/
/*}*/
.edit_dev >>> .el-transfer-panel__item {
  width: 100%;
  flex-wrap: nowrap;
  display: flex !important;
}

.edit_dev >>> .el-transfer-panel__item .el-checkbox__label {
  width: 100%;
  float: right;
}

.center-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

span.truncate {
  display: inline-block; /* 将span元素设为块状元素以允许宽度设置 */
  max-width: 6em; /* 设置最大宽度为4个字符的宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏超出容器宽度的内容 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
  vertical-align: bottom;
}

.el-checkbox {
  width: 100%;
}
</style>
